<!--帖子页面-->
<template>
  <div style="height: 6vh;background-color:#fff;padding: 10px 20px;">
    <span style="font-size:20px;line-height: 60px;">帖子管理</span>
  </div>
  <el-dialog :title="dialogTitle" v-model="dialogVisible"
             :before-close="handleClose"
             style="width: 1000px;padding:40px;">
    <el-form label-position="top" label-width="80px">
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="用户名">
            <el-input placeholder="请输入用户名" v-model="saveBlogForm.username"
                      :disabled="saveBlogForm.userId!=null"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="帖子标题">
            <el-input placeholder="请输入帖子标题" v-model="saveBlogForm.title"></el-input>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="帖子内容">
            <el-input placeholder="请输入帖子内容" v-model="saveBlogForm.content"></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="修改时间">
            <el-date-picker type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD" v-model="saveBlogForm.updateTime"/>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <el-form-item label="帖子类型">
            <el-select placeholder="请选择" v-model="saveBlogForm.type">
              <el-option v-for="item in typeOptions"
                         :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="handleClose">取消</el-button>
      <el-button type="primary" @click="saveBlog">保存</el-button>
    </template>
  </el-dialog>
  <!-- 用户查询卡片 -->
  <el-card style="margin: 20px;height: 70px;">
    <el-form :inline="true">
      <el-form-item label="用户搜索">
        <el-input placeholder="输入用户名" style="width: 220px;"
                  v-model="searchBlogForm.username" @keydown.enter="loadBlog" ></el-input>
      </el-form-item>
      <el-form-item label="帖子标题">
        <el-input placeholder="输入标题名" style="width: 220px;"
                  v-model="searchBlogForm.title" @keydown.enter="loadBlog"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="primary" @click="loadBlog">查询</el-button>
      </el-form-item>
    </el-form>
  </el-card>

  <!-- 用户信息表格 -->
  <el-card style="margin: 20px;">
    <el-table :data="blogArr">
      <el-table-column type="index" label="编号" width="80" align="center"></el-table-column>
      <el-table-column prop="username" label="用户名" align="center"></el-table-column>
      <el-table-column prop="title" label="帖子标题" align="center"></el-table-column>
      <el-table-column prop="content" label="帖子内容" align="center"></el-table-column>
      <el-table-column prop="createTime" label="发送时间" align="center"></el-table-column>
      <el-table-column prop="updateTime" label="修改时间" align="center"></el-table-column>
      <el-table-column prop="type" label="帖子类型" :formatter="blogTypeFormatter" align="center"></el-table-column>
      <el-table-column label="是否允许转发" align="center">
        <template #default="scope">
          <el-switch inactive-value="0" active-value="1" v-model="scope.row.forwardLimit"
                     @change="changeStatusF(scope.row.id,scope.row.forwardLimit)"></el-switch>
        </template>
      </el-table-column>
      <el-table-column  label="是否允许评论" align="center">
        <template #default="scope">
          <el-switch inactive-value="0" active-value="1" v-model="scope.row.commentLimit" @change="changeStatusC(scope.row.id,scope.row.commentLimit)"/>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" link
                     @click="editBlog(scope.row.id)">编辑</el-button>
          <el-button type="primary" size="small" link
                     @click="deleteBlog(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </el-card>
</template>

<script setup>
import {onMounted, ref} from "vue";
import qs from "qs";
import axios from "axios";
import {ElMessage} from "element-plus";

// 控制弹窗显示
const dialogVisible =ref(false);
// 弹窗标题
const dialogTitle =ref('编辑帖子');
// 定义数组用来保存帖子信息
const blogArr = ref([]);
// 定义查询表单
const searchBlogForm =ref({
  username:'',
  title:''
});
// 定义帖子类型格式化方法
const blogTypeFormatter=(row,column,cellValue,index)=>{
  if (cellValue=== 0){
    cellValue='求助帖子';
  }else if (cellValue===1){
    cellValue='资源帖子';
  }else if (cellValue===2){
    cellValue='日常帖子';
  }
  return cellValue;
}
// 定义方法显示帖子信息
const loadBlog=()=>{
  let data = qs.stringify(searchBlogForm.value);
  axios.get(BASE_URL+'/v1/blog/select?'+data).then((response)=>{
    if (response.data.code==2000){

      blogArr.value=response.data.data;
      console.log(response.data.data)
    }else {
      ElMessage.error(response.data.msg);
    }
  })
};
// 重置查询表单
const resetSearch=()=>{
  searchBlogForm.value.username='';
  searchBlogForm.value.title='';
  loadBlog();
};
// 一进页面自动加载数据
onMounted(()=>{
  loadBlog();
});

// 删除帖子
const deleteBlog=(id)=>{
  if (confirm('确定删除该帖子吗？')){
    axios.post(BASE_URL+'/v1/blog/delete/'+id).then((response)=>{
      if (response.data.code===2000){
        ElMessage.success(response.data.msg);
        loadBlog();
      }else {
        ElMessage.error(response.data.msg);
      }
    })
  }
};
// 修改帖子转发状态
const changeStatusF=(id,forwardLimit)=>{

  let data = qs.stringify({id: id, forwardLimit: forwardLimit});
  axios.post(BASE_URL+'/v1/blog/update/',data).then((response)=>{
    if (response.data.code===2000){
      ElMessage.success('修改帖子转发权限成功!');
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 修改帖子评论状态
const changeStatusC=(id,forwardLimit)=>{

  let data = qs.stringify({id: id, commentLimit: forwardLimit});
  axios.post(BASE_URL+'/v1/blog/update/',data).then((response)=>{
    if (response.data.code===2000){
      ElMessage.success('修改帖子评论权限成功!');
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}

// 定义对象用来保存用户信息
const saveBlogForm = ref({
  id:'',
  userId:'',
  username:'',
  title:'',
  content:'',
  type:'',
  forwardLimit:'1',
  commentLimit:'1',
  updateTime:''
});
// 定义方法显示类型信息
const typeOptions = ref({value:0,label:'求助帖子'},{value:1,label:'资源帖子'},{value:2,label:'日常帖子'})
// 关闭弹窗按钮
const handleClose=()=>{
  if (confirm('确定关闭弹窗吗？')){
    saveBlogForm.value={};
    dialogVisible.value=false;
  }
}
// 修改帖子信息
const saveBlog=()=>{
  let data = qs.stringify(saveBlogForm.value);
  axios.post(BASE_URL+'/v1/blog/update/',data).then((response)=>{
    if (response.data.code===2000){
      ElMessage.success(response.data.msg);
      loadBlog();
      dialogVisible.value=false;
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
// 编辑帖子
const editBlog=(id)=>{
  dialogVisible.value=true;
  dialogTitle.value='编辑帖子';
  axios.get(BASE_URL+'/v1/blog/select?id='+id).then(response=>{
    if (response.data.code===2000){
      saveBlogForm.value=response.data.data[0];
    }else {
      ElMessage.error(response.data.msg);
    }
  })
}
</script>

<style scoped>

</style>